@use './variables.scss' as *;

// ==================== 可复用组件样式 Mixins ====================

// ---------- 图片网格 ----------
@mixin pictures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: $spacing-xl;
  margin-bottom: $spacing-2xl;

  @include responsive($breakpoint-lg) {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: $spacing-lg;
  }

  @include responsive($breakpoint-md) {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: $spacing-md;
  }

  @include responsive($breakpoint-sm) {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

// ---------- 图片卡片 ----------
@mixin picture-card {
  @include card;
  border-radius: $radius-xl;
  overflow: hidden;
  background: white;
  cursor: pointer;
  transition: $transition-all;

  &:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: $shadow-primary-hover;

    .picture-cover img {
      transform: scale(1.1);
    }

    .picture-mask {
      opacity: 1;
    }
  }

  .picture-cover {
    position: relative;
    width: 100%;
    min-height: 200px;
    overflow: hidden;
    background: $gradient-bg;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
      height: auto;
      display: block;
      transition: $transition-transform;
    }

    .picture-mask {
      @include image-overlay;
      @include flex-center;
      color: white;
      font-size: $font-sm;
      font-weight: $font-semibold;
      pointer-events: none;

      span {
        margin: 0 $spacing-md;
        display: flex;
        align-items: center;
        gap: $spacing-xs;

        .anticon {
          font-size: $font-lg;
        }
      }
    }
  }

  .picture-meta,
  .picture-info {
    padding: $spacing-lg;

    .picture-title {
      font-size: $font-base;
      font-weight: $font-semibold;
      margin-bottom: $spacing-md;
      @include text-ellipsis;
      color: $text-primary;
    }

    .picture-author {
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      font-size: $font-sm;
      color: $text-secondary;

      .ant-avatar {
        border: 2px solid $border-light;
      }

      span {
        font-weight: $font-medium;
      }
    }

    .picture-stats {
      display: flex;
      gap: $spacing-xl;
      font-size: $font-sm;
      color: $text-tertiary;

      span {
        display: flex;
        align-items: center;
        gap: $spacing-xs;
        font-weight: $font-medium;

        .anticon {
          color: $primary-color;
          font-size: $font-lg;
        }
      }
    }
  }
}

// ---------- 空间卡片 ----------
@mixin space-card {
  @include card;
  cursor: pointer;
  border-radius: $radius-xl;
  overflow: hidden;
  background: white;
  transition: $transition-all;

  &:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: $shadow-primary-hover;

    .space-cover img {
      transform: scale(1.1);
    }
  }

  .space-cover {
    position: relative;
    height: 200px;
    background: $gradient-primary;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: $transition-transform;
    }

    .space-cover-placeholder {
      @include flex-center;
      height: 100%;
      font-size: 72px;
      color: rgba(255, 255, 255, 0.4);
    }

    .space-type-badge,
    .space-role-badge {
      position: absolute;
      top: $spacing-md;
      right: $spacing-md;

      :deep(.ant-tag) {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        font-weight: $font-semibold;
      }
    }
  }

  .space-info {
    padding: $spacing-lg;

    h3 {
      font-size: $font-xl;
      font-weight: $font-bold;
      margin-bottom: $spacing-sm;
      @include text-ellipsis;
      color: $text-primary;
    }

    .space-desc {
      color: $text-secondary;
      font-size: $font-sm;
      margin-bottom: $spacing-md;
      @include text-ellipsis;
    }

    .space-stats {
      display: flex;
      gap: $spacing-lg;
      font-size: $font-sm;
      color: $text-tertiary;
      margin-bottom: $spacing-md;

      span {
        display: flex;
        align-items: center;
        gap: $spacing-xs;
        font-weight: $font-medium;

        .anticon {
          color: $primary-color;
        }
      }
    }
  }
}

// ---------- 封面上传 ----------
@mixin cover-upload {
  .cover-preview {
    width: 100%;
    height: 200px;
    border-radius: $radius-lg;
    overflow: hidden;
    background: $gradient-bg;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  .cover-preview-placeholder {
    width: 100%;
    height: 200px;
    border: 2px dashed $border-dark;
    border-radius: $radius-lg;
    @include flex-center;
    flex-direction: column;
    color: $text-tertiary;
    background: $bg-secondary;

    p {
      margin-top: $spacing-sm;
      margin-bottom: 0;
    }
  }

  .upload-hint {
    margin-top: $spacing-sm;
    font-size: $font-xs;
    color: $text-tertiary;
    text-align: center;
  }
}

// ---------- 裁剪器容器 ----------
@mixin cropper-container {
  .cropper {
    height: 400px;
    background: $bg-tertiary;
    border-radius: $radius-md;
  }

  .cropper-toolbar {
    margin-top: $spacing-lg;
    text-align: center;

    :deep(.ant-space) {
      justify-content: center;
    }

    :deep(.ant-btn) {
      border-radius: $radius-md;
      transition: $transition-all;

      &:hover {
        transform: translateY(-2px);
        box-shadow: $shadow-sm;
      }
    }
  }

  .cropper-hint {
    margin-top: $spacing-md;
    text-align: center;
    font-size: $font-sm;
    color: $primary-color;
    font-weight: $font-medium;
  }
}

// ---------- 分页 ----------
@mixin pagination {
  @include flex-center;
  padding: $spacing-xl 0;

  :deep(.ant-pagination) {
    .ant-pagination-item {
      border-radius: $radius-md;
      font-weight: $font-medium;
      transition: $transition-all;

      &:hover {
        transform: translateY(-2px);
      }

      &-active {
        background: $gradient-primary;
        border: none;

        a {
          color: white;
        }
      }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
      .ant-pagination-item-link {
        border-radius: $radius-md;
      }
    }
  }
}

// ---------- 筛选区域 ----------
@mixin filter-section {
  margin-bottom: $spacing-xl;

  :deep(.ant-card) {
    border-radius: $radius-xl;
    box-shadow: $shadow-md;
    border: 1px solid $border-light;
  }

  :deep(.ant-select) {
    .ant-select-selector {
      border-radius: $radius-md;
      transition: $transition-all;

      &:hover {
        border-color: $primary-light;
      }
    }
  }

  :deep(.ant-input-search) {
    .ant-input {
      border-radius: $radius-lg;
      transition: $transition-all;

      &:hover {
        border-color: $primary-light;
      }

      &:focus {
        border-color: $primary-color;
        box-shadow: 0 0 0 3px rgba($primary-color, 0.1);
      }
    }
  }
}

// ---------- 头像上传 ----------
@mixin avatar-upload {
  text-align: center;

  .avatar-preview {
    margin-bottom: $spacing-lg;
    @include flex-center;

    :deep(.ant-avatar) {
      border: 3px solid $border-light;
      box-shadow: $shadow-md;
      transition: $transition-all;

      &:hover {
        border-color: $primary-color;
        box-shadow: $shadow-primary;
      }
    }
  }

  .upload-hint {
    margin-top: $spacing-sm;
    font-size: $font-xs;
    color: $text-tertiary;
  }
}

// ---------- 危险区域 ----------
@mixin danger-zone {
  padding: $spacing-lg;
  border: 2px solid rgba($error-color, 0.2);
  border-radius: $radius-lg;
  background: rgba($error-color, 0.05);

  h4 {
    color: $error-color;
    font-weight: $font-bold;
    margin-bottom: $spacing-sm;
  }

  p {
    color: $text-secondary;
    font-size: $font-sm;
    margin-bottom: $spacing-md;
  }

  :deep(.ant-btn-danger) {
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba($error-color, 0.3);
    }
  }
}



